<!DOCTYPE html>
<html>
<head>
	<title>leaflet学习</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"  
	integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
		crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
	integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
		crossorigin=""></script>
	<style>
		.map{
			height:100vw;
			width:100vw;
		}
	</style>
</head>
<body>
	<div id="mapid" class="map"></div>
</body>
</html>

<script type="text/javascript">
	//实例化地图
	var mapid = 'mapid';//div的id
	//var mapid = document.getElementById('mapid');//div文档对象
	var mymap = L.map(mapid,{
		center:[39.89866650195229,116.39170289039613],//[纬度，经度] 当前位置为北京故宫
		zoom:15,//地图放大级别
	});

	//瓦片图层
	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);


</script>
<script type="text/javascript" src="./public/js/marker.js"></script>
<script type="text/javascript" src="./public/js/popup.js"></script>


